<template>
    <div class="content">
        <el-card>
            <el-row type="flex" justify="space-between">
                <el-form ref="searchForm" :model="searchForm" size="small" :inline="true">
                    <el-form-item label="文章名称:" prop="name">
                        <el-input placeholder="请输入文章名称" v-model="searchName" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="文章编号:" prop="code">
                        <el-input placeholder="请输入文章编号" v-model="searchCode" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="文章状态" prop="status">
                        <el-select v-model="searchStatus" placeholder="请选择文章状态" clearable>
                            <el-option label="上架" value="上架"></el-option>
                            <el-option label="下架" value="下架"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="handleSearch()" icon="el-icon-search" >查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="small" @click="handleClear" icon="el-icon-refresh-right">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-row>
            <el-row>
                <el-button type="success" @click="add" size="small" icon="el-icon-plus" plain>新增</el-button>
                <el-button @click="refresh" size="small" icon="el-icon-refresh">刷新</el-button>
            </el-row>
            <el-dialog title="新增文章" :visible.sync="dialogAddVisible" width="35%">
                <el-form label-width="100px" :model="form" ref="form" :rules="rules">
                    <el-form-item label="文章序列:" prop="id">
                        <el-input v-model="form.id" placeholder="请输入文章序列" size="small" style="width: 250px;" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="文章名称:" prop="name">
                        <el-input v-model="form.name" placeholder="请输入文章名称" size="small" style="width: 250px;" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="文章编号:" prop="code">
                        <el-input v-model="form.code" placeholder="请输入文章编号" size="small"  style="width: 250px;" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="收藏数量:" prop="number">
                        <el-input v-model="form.number" placeholder="请输入收藏数量" size="small" style="width: 250px;" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="文章状态" prop="status">
                        <el-select v-model="form.status" placeholder="请选择文章状态" size="small" style="width: 250px;" clearable>
                            <el-option label="上架" value="上架"></el-option>
                            <el-option label="下架" value="下架"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="onSubmit()" size="small">保存</el-button>
                        <el-button @click="dialogAddVisible = false" size="small">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <el-table :data="pageData">
                <el-table-column label="序号" type="index"  width="66px" align="center"></el-table-column>
                <el-table-column label="文章名称" prop="name" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="文章编号" prop="code" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="文章状态" prop="status" style="width: 120px;" align="center"></el-table-column>
                <el-table-column label="收藏数量" prop="number" show-overflow-tooltip align="center"></el-table-column>
                <el-table-column label="操作" width="250" align="center">
                    <template slot-scope="scope">
                        <el-button type="success" size="small" @click="showDetail(scope.row)" plain>编辑</el-button>
                        <el-button type="danger" @click="handleDel(scope.row.id)" size="small" plain>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-row style="margin-top: 20px;">
                <el-col style="text-align: center">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentpage"
                        :page-sizes="[5, 10, 50, 100]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </el-col>
            </el-row>
        </el-card>
        <el-dialog title="文章管理" :visible.sync="dialogFormVisible" width="35%">
            <el-form :model="detailData" ref="detailData">
                <el-form-item label="文章序号" prop="id">
                    <el-input v-model="detailData.id" placeholder="请输入文章名序号" style="width: 250px" clearable></el-input>
                </el-form-item>
                <el-form-item label="文章名称" prop="name">
                    <el-input v-model="detailData.name" placeholder="请输入文章名称" style="width: 250px" clearable></el-input>
                </el-form-item>
                <el-form-item label="文章编号" prop="code">
                    <el-input v-model="detailData.code" placeholder="请输入文章编号" style="width: 250px" clearable></el-input>
                </el-form-item>
                <el-form-item label="收藏数量" prop="number">
                    <el-input v-model="detailData.number" placeholder="请输入收藏数量" style="width: 250px" clearable></el-input>
                </el-form-item>
                <el-form-item label="文章状态" prop=status>
                    <el-select  v-model="detailData.status" style="width: 250px" clearable  placeholder="请输入收藏数量">
                        <el-option label="上架" value="上架"></el-option>
                        <el-option label="下架" value="下架"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item align="center">
                    <el-button @click="closeDialog()">取 消</el-button>
                    <el-button type="primary" @click="handleEdit()">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>


<script>
import { 
    getArticleList, 
    addArticle, 
    deleteArticleById, 
    updateArticle,
    searchArticle
} from '@/api/article.js';

export default {
    data() {
        return {
            searchId: '',
            searchName: '',
            searchStatus: '',
            searchCode: '',
            searchForm: {
                id: '',
                name: '',
                status: '',
                code: '',
            },
            articleData: [],
            dialogFormVisible: false,
            detailData: {},

            dialogAddVisible: false,
            form: {},

            // 分页
            total: 0,
            currentpage: 1,
            pageSize: 10,
            pageData: [], // 分页后当前页的数据

            rules: {
                name: [
                    {
                        required: true,
                        message: '请输入文章名称',
                        trigger: 'blur'
                    }
                ],
                code: [
                    {
                        required: true,
                        message: '请输入文章编号',
                        trigger: 'blur'
                    }
                ],
                number: [
                    {
                        required: true,
                        message: '请输入收藏数量',
                        trigger: 'blur'
                    }
                ],
                id: [
                    {
                        required: true,
                        message: '请选择文章序列',
                        trigger: 'blur'
                    }
                ],
                status: [
                    {
                        required: true,
                        message: "请选择文章状态",
                        trigger: 'blur'
                    }
                ]
            }
        };
    },
    mounted() {
        this.getArticleData();
    },
    methods: {
        add() {
            this.form = {};
            this.dialogAddVisible = true;
        },
        addView(url, queryParams) {
            this.$router.push({
                path: url,
                query: queryParams
            });
        },
        handleDel(id) {
            this.$confirm("确认删除该文章?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                // 调用删除接口
                deleteArticleById(id).then((res) => {
                    if (res.data.code === 200) {
                        this.$message.success(res.data.message);
                        this.getArticleData();
                    } else {
                        this.$message.error(res.data.message);
                    }
                });
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消删除"
                });
            });
        },
        handleClear() {
            this.searchName = '';
            this.searchCode = '';
            this.searchStatus = '';
        },
        handleSearch() {
            searchArticle({
                name: this.searchName.trim(),
                code: this.searchCode.trim(),
                status: this.searchStatus.trim()
            }).then((res) => {
                console.log(res);
                if (res.data.code === 200) {
                    this.$message.success(res.data.message);
                    this.articleData = res.data.data;
                    this.total = this.articleData.length;
                    this.getPageInfo();
                } else {
                    this.$message.error(res.data.message);
                }
            }).catch(() => {
                this.$message.warning("查询失败，请稍后重试");
            });
        },
        showDetail(row) {
            this.detailData = row;
            this.dialogFormVisible = true;
        },
        closeDialog() {
            this.dialogFormVisible = false;
        },
        getArticleData() {
            getArticleList().then((response) => {
                if (response.data.code === 200) {
                    this.articleData = response.data.data;
                    this.total = this.articleData.length;
                    this.getPageInfo();
                } else {
                    this.$message.error(response.data.message);
                }
            });
        },
        // 分页逻辑
        getPageInfo() {
            this.pageData = [];
            for (let i = (this.currentpage - 1) * this.pageSize; i < this.total; i++) {
                this.pageData.push(this.articleData[i]);
                if (this.pageData.length === this.pageSize) {
                    break;
                }
            }
        },
        handleSizeChange(size) {
            this.pageSize = size;
            this.getPageInfo();
        },
        handleCurrentChange(pageNumber) {
            this.currentpage = pageNumber;
            this.getPageInfo();
        },
        // 添加文章
        onSubmit() {
            addArticle(this.form).then((response) => {
                if (response.data.code === 200) {
                    this.$message.success(response.data.message);
                    this.getArticleData();
                    this.dialogAddVisible = false;
                } else {
                    this.$message.error(response.data.message);
                }
            }).catch(() => {
                this.$message.error("与服务器连接失败...");
            });
        },
        handleEdit() {
            this.$confirm("确认保存修改内容?", "提示", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: 'warning'
            }).then(() => {
                updateArticle(this.detailData).then(response => {
                    if (response.data.code === 200) {
                        this.$message.success(response.data.message);
                        this.getArticleData();
                        this.dialogFormVisible = false;
                    } else {
                        this.$message.warning(response.data.message);
                    }
                }).catch(() => {
                    this.$message.error("连接服务器失败");
                });
            }).catch(() => {
                this.$message.info("已取消编辑");
            });
        },
        refresh() {
            this.currentpage = 1;
            this.getArticleData();
        }
    }
};
</script>



<style>
.el-card, .el-form{
    margin-top: 20px
}

.el-table{
    margin-top: 30px
}
</style>